<template>
  <!--识别出的数据-->
  <div
    class="tool-image-result"
    v-if="identifyArr">
    <p
      v-for="(v, k) in identifyArr"
      :key="k">{{ v.words }}</p>
    <copy-icon
      class="copy"
      @click="copyBtnClick"/>
  </div>
</template>

<script>
  import API from '@/api/apis'
  import {get} from '@/api/ajax'
  import CopyIcon from '@/icons/copy.svg'
  export default {
    name: "ToolImageResult",
    components: {
      CopyIcon
    },
    data() {
      return {
        /**
         * 识别出的数据
         */
        identifyArr: null
      }
    },
    methods: {
      /**
       * 图片识别
       */
      imageDentify(urkKey, p) {
        this.identifyArr = null
        const url = API.baidu[urkKey]
        get (url, p).then ((data) => {
          if (data && data.length > 0) {
            this.identifyArr = data
          } else {
            this.$w_popview.msgError ('没有识别出文字')
          }
        }).catch ((err) => {
          this.$w_popview.msgError (err)
        }).finally(() => {
          this.$w_popview.hideLoading()
        })
      },
      /**
       * 拷贝按钮点击
       */
      copyBtnClick() {
        const arr = this.identifyArr.map((item) => {
          return item.words
        })
        const text = arr.join('  ')
        this.$copyText(text).w_then(() => {
          this.$w_popview.msgSuccess('拷贝成功')
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.tool-image-result {
  margin: 10px;
  padding: 5px;
  background-color: #d9d9d9;
  border-radius: 5px;
  color: #333;
  font-size: 16px;
  position: relative;
  .copy {
    width: 30px;
    height: 30px;
    fill: #666;
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
